<%--
  Created by IntelliJ IDEA.
  User: 戴金睿
  Date: 2022/11/20
  Time: 16:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>EShopManager</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/lib/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/stylesheets/theme.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/lib/font-awesome/css/font-awesome.css"/>
    <script src="${pageContext.request.contextPath}/static/lib/jquery-1.7.2.min.js" type="text/javascript"></script>

    <!-- 日期选择器 -->
    <!-- <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" /> -->
    <!-- <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> -->
    <!-- <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" /> -->
    <!------------>

    <!-- Demo page code -->

    <style type="text/css">
        #line-chart {
            height: 300px;
            width: 800px;
            margin: 0px auto;
            margin-top: 1em;
        }

        .brand {
            font-family: georgia, serif;
        }

        .brand .first {
            color: #ccc;
            font-style: italic;
        }

        .brand .second {
            color: #fff;
            font-weight: bold;
        }
    </style>

    <script type="text/javascript">
        /**日期选择器**/
        // $(function() {
        //   $( "#datepicker" ).datepicker();
        // });

        /**全选、全不选**/
        $(function () {
            $("#all_ck").change(function () {
                if ($(this).is(':checked')) {//全选
                    $("[name=ck]:checkbox").each(function () {
                        this.checked = true;
                        //$(this).attr("checked",true);
                    });
                } else {//全不选
                    $("[name=ck]:checkbox").each(function () {
                        this.checked = false;
                        //$(this).attr("checked",false);
                    });
                }

            });

        });

    </script>
</head>
<body>


<!-- 顶部页面 -->
<c:import url="top.jsp"></c:import>


<!-- 左边页面 -->
<c:import url="left.jsp"></c:import>

<div class="content">
    <div class="header">
        <h1 class="page-title">订单管理</h1>
    </div>

    <ul class="breadcrumb">
        <li><a href="${pageContext.request.contextPath}/OrderManagerController/select">订单管理</a> <span
                class="divider">/</span></li>
        <li class="active">订单列表</li>
    </ul>

    <div class="container-fluid">

        <div class="row-fluid">

            <div class="block">
                <a href="#page-filter" class="block-heading" data-toggle="collapse">筛选</a>
                <div id="page-filter" class="block-body collapse in">
                    <div class="search-well">
                        <form class="form-inline" role="search"
                              action="${pageContext.request.contextPath}/OrderManagerController/select" method="post">
                            <input type="hidden" name="page" value="1">
                            <input type="text" class="form-control" placeholder="订单号" value="${param.orderId}"
                                   name="orderId"/>
                            <input type="text" class="form-control" value="${param.person}"
                                   placeholder="收货人" name="person"/>
                            <input type="text" class="form-control" value="${param.orderDate}"
                                   placeholder="请选择下单日期" id="datepicker" name="orderDate"/>
                            <select class="form-control" name="status">
                                <option value="${param.status eq "" ? "selected" : "" }">--请选择状态--</option>
                                <option value="status_pay_0" ${param.status eq "status_pay_0" ? "selected" : "" }>待付款
                                </option>
                                <option value="status_pay_1" ${param.status eq "status_pay_1" ? "selected" : "" }>已付款
                                </option>
                                <option value="status_send_0" ${param.status eq "status_send_0" ? "selected" : "" }>待发货
                                </option>
                                <option value="status_send_1" ${param.status eq "status_send_1" ? "selected" : "" }>已发货
                                </option>
                                <option value="status_receiving_0" ${param.status eq "status_receiving_0" ? "selected" : "" }>
                                    待收货
                                </option>
                                <option value="status_receiving_1" ${param.status eq "status_receiving_1" ? "selected" : "" }>
                                    已收货
                                </option>
                                <option value="status_-1" ${param.status=="status_-1" ? "selected" : "" }>已取消</option>
                                <option value="status_1" ${param.status=="status_1" ? "selected" : "" }>已完成</option>
                            </select>
                            <button type="submit" class="btn btn-default"><i class="icon-search"></i> 查询</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid">

            <span>共有 <b>${ordersList.totalPage}</b> 页记录</span>

            <div class="well">

                <div class="search-well">
                    <form class="form-inline" action="#">
                        <select name="control">
                            <option value="" selected="selected">--请选择--</option>
                            <option value="cancl">取消</option>
                            <option value="delete">删除</option>
                        </select>
                        <button class="btn" id="btnUpdate" type="button"><i class="icon-legal"></i> 操作</button>
                    </form>
                </div>

                <table class="table">
                    <thead>
                    <tr id="theTableTitle">
                        <th>
                            <input type="checkbox" id="all_ck"/>
                            订单号
                        </th>
                        <th>总金额</th>
                        <th>下单时间</th>
                        <th>收货人</th>
                        <th>收货地址</th>
                        <th>订单状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>

                    <tbody>
                    <c:forEach items="${ordersList.orders}" var="orders" varStatus="orderIndex">
                        <tr>
                            <td>
                                <input type="checkbox" id="ck" name="ck" value=" ${orders.orderId}"/>
                                    ${orders.orderId}
                            </td>
                            <td>${orders.orderPrice}</td>
                            <td>
                                <a href="#">${orders.userName} </a>
                                <br/>
                                    ${orders.orderDate}
                            </td>
                            <td>
                                    ${orders.person}
                                <br/>
                            </td>
                            <td>${orders.address}</td>
                            <td>
                                <c:choose>
                                    <c:when test="${orders.orderStatus eq '已取消'}">
                                        <span style="color: red">已取消</span>
                                    </c:when>
                                    <c:otherwise>
                                        ${orders.orderStatus}
                                    </c:otherwise>
                                </c:choose>
                            </td>
                            <td>
                                <a href="${pageContext.request.contextPath}/OrderManagerController/reforwdSelectOrder/${orders.orderId}"
                                   title="查看">
                                    <i class="icon-search"></i>
                                </a>
                                <a href="javascript:deleteClick(${orders.orderId})" title="删除"><i
                                        class="icon-remove"></i></a>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>

                </table>
            </div>

            <!-- 控制返回来的page -->
            <c:set var="page" scope="request">
                <c:if test="${param.page==null}">
                    1
                </c:if>
                <c:if test="${param.page!=null}">
                    ${param.page}
                </c:if>
            </c:set>

            <!-- 保存当前查询状态 -->
            <c:set var="searchcondition" scope="request">
                ${pageContext.request.contextPath}/OrderManagerController/select?orderId=${param.orderId}&person=${param.person}&status=${param.status}&orderDate=${param.orderDate}
            </c:set>

            <div class="pagination pagination myul">
                <ul>
                    <%--  active  disabled--%>
                    <%--是第一页--%>
                    <c:if test="${requestScope.page == 1}">
                        <li class='disabled'><a href="#">&laquo;首页</a></li>
                        <li class='disabled'><a href="#">上一页</a></li>
                    </c:if>
                    <%--不是第一页--%>
                    <c:if test="${requestScope.page != 1}">
                        <li class=''><a href="${requestScope.searchcondition}&page=1">
                            首页</a></li>
                        <li class=''><a href="${requestScope.searchcondition}&page=${requestScope.page-1}">
                            上一页</a></li>
                    </c:if>

                    <!-- 填充页数 -->
                    <c:forEach begin="1" end="${ordersList.totalPage}" varStatus="orderIndex">
                        <%--是当前页--%>
                        <c:if test="${requestScope.page == orderIndex.count}">
                            <li class='active'>
                                <a href="javascript:">${orderIndex.count}</a>
                            </li>
                        </c:if>
                        <%--不是当前页--%>
                        <c:if test="${requestScope.page != orderIndex.count}">
                            <li class=''>
                                <a href="${requestScope.searchcondition}&page=${orderIndex.count}">${orderIndex.count}</a>
                            </li>
                        </c:if>
                    </c:forEach>

                    <!-- 最后一页 -->
                    <c:if test="${requestScope.page == ordersList.totalPage}">
                        <li class='disabled'>
                            <a href="#">下一页</a>
                        </li>
                        <li class='disabled'>
                            <a href="#">尾页&raquo;</a>
                        </li>
                    </c:if>

                    <!-- 不是最后一页 -->
                    <c:if test="${requestScope.page != ordersList.totalPage}">
                        <li>
                            <a href="${requestScope.searchcondition}&page=${requestScope.page+1}">
                                下一页</a>
                        </li>
                        <li>
                            <a href="${requestScope.searchcondition}&page=${ordersList.totalPage}">
                                尾页&raquo;</a>
                        </li>
                    </c:if>

                </ul>
            </div>


        </div>

        <!-- 底部页面 -->
        <c:import url="footer.jsp"></c:import>
    </div>


</div>

<script src="${pageContext.request.contextPath }/static/lib/bootstrap/js/bootstrap.js"></script>

<script>
    $(function () {
        $("#btnUpdate").click(function () {
            var control = $("select[name='control']").val();
            if (control == '') {
                show_err_msg("请选择您要的操作");
            } else {
                var ckValArray = [];
                $("input[name='ck']:checked").each(function () {
                    ckValArray.push($(this).val());
                });

                if (ckValArray.length == 0) {
                    show_err_msg("请选择编号");
                } else {
                    if (confirm("确定要执行该操作吗")) {
                        show_loading();
                        <!-- 选中复选框要操作的订单id，用逗号拼接成字符串 -->
                        var orderIds = ckValArray.join(",");

                        var url = "${pageContext.request.contextPath}/OrderManagerController/canclOrDelete";
                        var data = {
                            control: control, //包含了操作的字段名，和对应的值
                            orderIds: orderIds     //包含书本id
                        };

                        $.post(url, data, function (response) {
                            // var jsonData=$.parseJSON(response);
                            // var result=jsonData.status;
                            console.log(response);
                            var responseUrl = "${requestScope.searchcondition}&page=${requestScope.page}";
                            if (response.effectRow > 0) {
                                show_msg('操作成功', responseUrl);
                            } else {
                                show_err_msg('操作失败');
                            }
                        });
                    }
                }

            }
        });

    });

    //删除
    function deleteClick(book_id) {
        //alert("==")
        if (confirm("你确定要删除该书本吗?")) {
            var responseUrl = "${requestScope.searchcondition}?page=${requestScope.page}";
            // console.log(book_id);
            var bookIds = book_id.toString();
            var ids = bookIds.split(',');
            // console.log(ids)
            $.ajax({
                url: '${pageContext.request.contextPath}/OrderManagerController/deleteOrders',
                type: 'DELETE',
                cache: false,
                processData: false,
                data: JSON.stringify(ids),   //转换成json字符串发送
                contentType: "application/json",    //设置请求参数类型为json字符串
                dataType: "json"
            }).done(function (res) {
                console.log(res)
                if (res.effectRow >= 1) {
                    //console.log(responseUrl)
                    //跳转到responseUrl
                    show_msg('操作成功', responseUrl);
                } else {
                    show_err_msg('操作失败');
                }
            }).fail(function (res) {
                show_err_msg('操作失败');
            });
        }
    }

</script>

</body>
</html>